import Svg from "@/components/base/Svg"
import { resolveAssetImage } from "@/utils/common"
import { css } from "@emotion/react"
import { ChangeEvent, useMemo, useRef, useState } from "react"
import { createLogger } from "@/utils/logger"

const logger = createLogger("BaseImageUploader")

type Props = {
    value?: string
    onChange: (value: string) => void
    onUpload?: (file: File) => void
    defaultValue?: string
    disabled?: boolean
    status?: "idle" | "focus" | "error"
    prefix?: React.ReactNode
    inputProps?: Omit<
        React.InputHTMLAttributes<HTMLInputElement>,
        "onChange" | "onFocus" | "onBlur" | "value" | "defaultValue" | "disabled" | "ref"
    >
}

export default function BaseImageUploader(props: Props) {
    const {
        //
        value,
        onChange,
        onUpload,
        defaultValue,
        disabled,
        status: _status,
        inputProps: _inputProps,
    } = props
    const inputRef = useRef<HTMLInputElement>(null)
    const [status, setStatus] = useState<NonNullable<typeof _status>>(_status ?? "idle")

    const finalValue = value || defaultValue
    const finalStatus = useMemo(() => {
        if (disabled) {
            return "idle"
        }
        return _status ?? status
    }, [disabled, _status, status])

    const BoxShadowColor = useMemo(() => {
        switch (finalStatus) {
            case "error":
                return "#FF0000"
            case "focus":
                return "#0A6CFF"
            default:
                return "#e0e0e1"
        }
    }, [finalStatus])

    const ClearButtonColor = useMemo(() => {
        switch (finalStatus) {
            case "error":
                return "#FF0000"
            case "focus":
                return "#0A6CFF"
            default:
                return "#000000"
        }
    }, [finalStatus])

    const BackgroundColor = useMemo(() => {
        switch (finalStatus) {
            case "error":
                return "#ffe0e0"
            case "focus":
                return "#e6f0ff"
            default:
                return "#ffffff"
        }
    }, [finalStatus])

    const PlaceholderColor = useMemo(() => {
        switch (finalStatus) {
            case "error":
                return "#ffadad"
            case "focus":
                return "#96c0ff"
            default:
                return "#c9c9c9"
        }
    }, [finalStatus])

    const canAddOrChange = useMemo(() => {
        if (disabled) {
            return false
        }
        if (value) {
            return true
        }
        return true
    }, [disabled, value])

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0]
        if (!file) {
            return
        }
        const reader = new FileReader()
        reader.onload = (e) => {
            logger.info("handleChange", {
                file,
                result: e.target?.result,
            })
            onUpload?.(file)
            onChange(e.target?.result as string)
        }
        reader.readAsDataURL(file)
    }

    return (
        <div
            css={css`
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-family: "Gilroy", sans-serif;
                transition:
                    box-shadow 0.2s ease-in-out,
                    background-color 0.2s ease-in-out;
                flex: 1;
                min-height: 200rem;
                border-radius: 8rem;
                padding: 0 16rem;
                box-shadow: inset 0 0 0 1.5rem ${BoxShadowColor};
                background-color: ${disabled ? "#f0f0f0" : BackgroundColor};
                cursor: ${disabled ? "not-allowed" : "default"};
                user-select: none;
                z-index: 1;
            `}
        >
            <div
                css={css`
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    object-fit: cover;
                    border-radius: 8rem;
                    overflow: hidden;
                    background-color: #f0f0f0;
                `}
            >
                <img
                    css={css`
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    `}
                    src={finalValue}
                />
            </div>
            <input
                css={css`
                    pointer-events: none;
                    user-select: none;
                    position: absolute;
                    opacity: 0;
                `}
                type="file"
                ref={inputRef}
                onChange={handleChange}
                accept={_inputProps?.accept ?? "image/*"}
            />
            {canAddOrChange && (
                <div
                    onClick={() => {
                        inputRef.current?.click()
                    }}
                    css={css`
                        position: relative;
                        user-select: none;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        gap: 2rem;
                        cursor: pointer;
                        z-index: 1;
                    `}
                >
                    <Svg
                        css={css`
                            width: 32rem;
                            height: 32rem;
                        `}
                        src="kyc/add_photo.svg"
                    />
                    <div
                        css={css`
                            font-family: Gilroy;
                            font-weight: 500;
                            font-size: 14rem;
                            line-height: 20rem;
                            letter-spacing: 0%;
                            text-align: center;
                            color: #005ae0;
                        `}
                    >
                        Add
                    </div>
                </div>
            )}
        </div>
    )
}
